<template>
  <div>
    <NavBar :title="title" />
    <div class="content-top my-deliver">
      <MyEmpty v-if="loading === false && list.length === 0" />
      <van-list v-model="loading" :finished="finish" finished-text="没有更多了" @load="onLoad" v-else>
        <van-swipe-cell class="list-item" v-for="(item, index) in list" :key="index">
          <div class="item-show">
            <div class="bar01">
              <p>
                <span @click="onJobClick(item.stationID_Main)">{{ item.stationName }}</span>
                <span :class="{ unread: !item.companyIsRead}">{{item.companyIsRead ? '已读':'未读' }}</span>
              </p>
              <p>
                <span @click="onCompanyClick(item.companyID)">{{item.companyName}}</span>
                <span>{{ item.applyDateStr }}</span>
              </p>
            </div>
            <div class="bar02" v-if="item.companyResult != '' || item.companyTel != ''">
              <p>
                <span v-if="item.companyResult != ''">{{
                  item.companyResult
                }}</span>
              </p>
              <p>
                <van-button v-if="item.companyTel != ''" plain round block hairline icon="phone-o" color="#05A6F0" text="打电话" type="danger" style="font-size: 14px; height: 28px; padding: 0" @click="toCall(item.tel)" />
              </p>
            </div>
          </div>
          <template #right>
            <van-button square text="删除" type="danger" style="height: 100%" @click="onDel(index, item.id)" />
          </template>
        </van-swipe-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import MyEmpty from "@/components/MyEmpty.vue";
import { PersonApplyJobList, PersonDelApplyJob } from "@/util/http";
import { List, Toast, Dialog, SwipeCell, Button } from "vant";
import { mixin_person_toJobCompany, mixin_call } from "@/mixin/mixins";
import Global from "@/Global";
export default {
  name: "ApplyJob",
  components: { NavBar, MyEmpty, [List.name]: List, [SwipeCell.name]: SwipeCell, [Button.name]: Button, },
  props: ["title"],
  mixins: [mixin_person_toJobCompany, mixin_call],
  mounted() {
    this.onLoad();
  },
  // 定义属性
  data() {
    return {
      list: [],
      page: 0,
      loading: true,
      finish: false,
    };
  },
  // 方法集合
  methods: {
    onLoad() {
      let pageSize = 20;
      this.loading = true;
      this.page++;
      this.$api.get('/PersonStation/GetApplyRecordPageList', { pageIndex: this.page, pageSize: pageSize }).then(res => {
        this.loading = false;
        if (res.success) {
          this.list = [...this.list, ...res.response];
        }
        this.finish = !res.success || res.response.length < pageSize;
      });
    },
    onDel(index, id) {
      Dialog.confirm({
        message: "确认删除该条记录？",
      })
        .then(() => {
          PersonDelApplyJob(id).then((res) => {
            Toast(res.msg);
            if (res.result === 1) {
              this.$bus.$emit(Global.bus_person_resume_update, "ok");
              this.list.splice(index, 1);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/dialog/index.less";
@import "@/assets/css/common.less";

/* 投递列表 */
.my-deliver .list-item {
  background-color: #fff;
}

.my-deliver .list-item + .list-item {
  margin-top: 10px;
}

.my-deliver .list-item .item-show {
  display: flex;
  flex-direction: column;
  padding: 0 15px;
}

.my-deliver .list-item .bar01 {
  display: flex;
  flex-direction: column;
  padding: 15px 0;
}

.my-deliver .list-item .bar01 p {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.my-deliver .list-item .bar01 p + p {
  margin-top: 4px;
}

.my-deliver .list-item .bar01 p span {
  max-width: 240px;
  font-size: 15px;
  color: #b6b6b6;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.my-deliver .list-item .bar01 p span.unread {
  color: #f66;
}

.my-deliver .list-item .bar01 p:nth-child(1) span:nth-child(1) {
  font-size: 18px;
  color: #333;
  font-weight: 700;
}

.my-deliver .list-item .bar01 p:nth-child(2) span:nth-child(1) {
  color: #999;
}

.my-deliver .list-item .bar02 {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 0.5px solid #eee;
}

.my-deliver .list-item .bar02 p:nth-child(1) {
  display: flex;
  flex: 1;
  margin-right: 20px;
}

.my-deliver .list-item .bar02 p:nth-child(1) span {
  font-size: 14px;
  color: #05a6f0;
  line-height: 28px;
}

.my-deliver .list-item .bar02 p:nth-child(1) span::before {
  content: "HR反馈：";
  color: #b6b6b6;
}

.my-deliver .list-item .bar02 p:nth-child(2) {
  display: flex;
  flex: 0 0 76px;
}

.my-deliver .list-item .bar02 p:nth-child(2) button span {
  margin-left: 2px;
}
</style>
